/**
 * Created by Administrator on 2025/10/24.
 */

function DisplayDate() {
    //下面的语句执行后，原本的内容将会被替代
    // document.getElementById("Demo").innerHTML=Date();
    //下面这个document.write只能在HTML输出中使用，
    //如果在文档加载后使用该方法，将会覆盖整个文档(比如这里的用法)
    document.write("<h1>这是一个标题</h1>");
}

function ChangeImage() {
    var element=document.getElementById("MyImage");
    if (element.src.match("pic_bulboff"))
    {
        //进入这里表示 src中包含(记住是包含)"pic_bulboff"字符串
        element.src="pic_bulbon.gif";
    }
    else
    {
        element.src="pic_bulboff.gif";
    }
}


/*
*   appendChild() 是 JavaScript 中用于操作 DOM（文档对象模型）的一个方法，它能够将一个节点添加到指定父节点的子节点列表的末尾
*   该方法的基本语法为 parentNode.appendChild(childNode)，其中 parentNode 是要添加子节点的父元素，childNode 是要添加的子节点
*   它返回被添加的节点作为结果
* */

function Exercise() {
    var Para=document.createElement("p"); //这里其实是自动闭合的
    var node=document.createTextNode("这是一个新的段落");
    //
    Para.appendChild(node);
}

/*
*  DOM:就是Document Object Model(文档对象模型)
*
*  HTML 事件可以是浏览器行为，也可以是用户行为
*  以下是 HTML 事件的实例：
*       HTML 页面完成加载
*       HTML input 字段改变时
*       HTML 按钮被点击
*   通常，当事件发生时，你可以做些事情。
*   在事件触发时 JavaScript 可以执行一些代码。
*   HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。
*       单引号: <some-HTML-element some-event='JavaScript 代码'>
*       双引号: <some-HTML-element some-event="JavaScript 代码">
*
*   下面是一些常见的HTML事件的列表:(有些事件 css也可以实现和捕捉)
*               事件                                      描述
*         onchange	                                   HTML 元素改变
*         onclick	                                   用户点击 HTML 元素
*         onmouseover	                               鼠标指针移动到指定的元素上时发生
*         onmouseout	                               用户从一个 HTML 元素上移开鼠标时发生
*         onkeydown	                                   用户按下键盘按键
*         onload	                                   浏览器已完成页面的加载
*
*
*    字符串可以是对象
*        通常， JavaScript 字符串是原始值，可以使用字符创建： var firstName = "John"
*        但我们也可以使用 new 关键字将字符串定义为一个对象： var firstName = new String("John")
*
*
*    两个数字相加，返回数字相加的和，如果数字与字符串相加，返回字符串 "hello" + 5 等于 "hello5"
*
*
*    数组（Array）字面量 定义一个数组：       [40, 100, 1, 5, 25, 10]
*                                           cars=["BMW","Volvo","Saab","Ford"]; //定义一个数组,数组里面的元素是字符串
*
*    For/In 循环  有点类似于 C++ 11 里面的 Range for
*       JavaScript for/in 语句循环遍历对象的属性
*
*       function myFunction(){
*           var x;
*           var txt="";
*           var person={fname:"Bill",lname:"Gates",age:56};  //对象
*           for (x in person){
*               txt=txt + person[x];
*           }
*       }
*      document.getElementById("demo").innerHTML=txt;
*
*      以下 JSON 语法定义了 sites 对象: 3 条网站信息（对象）的数组:
*       JSON 实例
*          {
*               "sites":[
*                       {"name":"Runoob", "url":"www.runoob.com"},
*                       {"name":"Google", "url":"www.google.com"},
*                       {"name":"Taobao", "url":"www.taobao.com"}
*                   ]
*           }
*      JSON 语法规则
*           数据为 键/值 对。
*           数据由逗号分隔。
*           大括号保存对象 (就是{ })
*           方括号保存数组 (就是[] )
*
*     JSON 数据 - 一个名称对应一个值
*     JSON 数据格式为 键/值 对，就像 JavaScript 对象属性。
*     键/值对包括字段名称（在双引号中），后面一个冒号，然后是值：
*        "name":"Runoob"
*
*     JSON 对象
*     JSON 对象保存在大括号内。
*     就像在 JavaScript 中, 对象可以保存多个 键/值 对：
*       {"name":"Runoob", "url":"www.runoob.com"}
*
*     JavaScript 异步编程 (可以理解为多线程?)
*       异步的概念
*       异步（Asynchronous, async）是与同步（Synchronous, sync）相对的概念
*       在我们学习的传统单线程编程中，程序的运行是同步的（同步不意味着所有步骤同时运行，而是指步骤在一个控制流序列中按顺序执行）。
*       而异步的概念则是不保证同步的概念，也就是说，一个异步过程的执行将不再与原有的序列有顺序关系。（可以理解为乱序执行 ?）
*       简单来理解就是：同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。
*
*       setTimeout 是 JavaScript 中用于延迟执行代码的函数。
*       ‌基本功能：
*           设置一个定时器，在指定毫秒数后执行特定函数
*           语法：setTimeout(函数, 延迟时间, 参数1, 参数2...)
*           返回一个定时器 ID，可用于取消执行
*
*       主要特点：
*           异步执行‌：不会阻塞后续代码运行
*           单次执行‌：只执行一次指定函数
*           时间精度‌：最小延迟约4ms（浏览器限制）
*           取消机制‌：使用 clearTimeout(定时器ID) 可取消尚未执行的定时任务
*           (具体应用如下)
*           // 3秒后显示提示
*           setTimeout(() => {
*                   console.log('3秒时间到！');
*               }, 3000);
*
*           // 带参数的用法
*           function showMessage(name) {
*                   console.log(`你好，${name}！`);
*               }
*           setTimeout(showMessage, 2000, '小明');
*
*       异步 AJAX
*           除了 setTimeout 函数以外，异步回调广泛应用于 AJAX 编程。
*           XMLHttpRequest 常常用于请求来自远程服务器上的 XML 或 JSON 数据。一个标准的 XMLHttpRequest 对象往往包含多个回调：
*
*      JavaScript Promise
*            Promise 是 JavaScript 中用于处理异步操作的对象，它代表一个异步操作的最终完成（或失败）及其结果值。
*
*       const myPromise = new Promise((resolve, reject) => {
*            异步操作代码
*
*           if (操作成功) {
*               resolve('成功的结果');  将 Promise 状态改为 fulfilled
*            } else {
*               reject('失败的原因');  将 Promise 状态改为 rejected
*            }
*       });
*
**/

/*
*   关于javascript中异步操作的部分，需要重点关注
* */

/*
*   函数表达式 (注意这个函数没有名称)
*       JavaScript 函数可以通过一个表达式定义。
*       函数表达式可以存储在变量中：
*       var x = function (a, b) {return a * b};
*       在函数表达式存储在变量后，变量也可作为一个函数使用：
*     实例:
*       var x=function(a,b){return a*b};
*       var z=x(4,3);
*
*       这里注意一下，就是如果只输出x，那么其值为 "function (a, b) {return a * b}"
*
*       上面的x就相当于是一个函数指针了
*     以上函数实际上是一个匿名函数(就是函数没有名称)
*     函数存储在变量中，不需要函数名称，通常通过变量名来调用。
*     上述函数以分号结尾，因为它是一个执行语句。(言下之意就是如果不是可执行语句，那么就不用以分号结尾)
*     在 JavaScript 中，很多时候，你需要避免使用 new 关键字。
*
*   箭头函数
*      箭头函数表达式的语法比普通函数表达式更简洁，具体如下  （并且下面的语句是有 返回值的）
*
*      (参数1,参数2,...,参数N) => {函数声明}
*
*      (参数1,参数2,..,参数N) =>表达式(单一)
*      // (参数1,参数2,...,参数N) => {return 表达式;}
*
*      当只有一个参数时，圆括号是可选的: 如下
*        (单一参数) => {函数声明}
*        单一参数 => {函数声明}
*      没有参数的函数应该被写成一对圆括号:
*        ()=>{函数声明}
*
*      实例
*        var x=function(x,y){
*           return x*y;
*        }
*
*       const x=(x,y)=>{x*y}
*
*       在 JavaScript 中，this 是一个指向当前执行上下文对象的引用关键字
*       它的值是在函数被调用时动态绑定的，具体指向哪个对象完全取决于函数的调用方式，而非函数的定义位置
*
*
*       Window对象
*           所有浏览器都支持 window 对象。它表示浏览器窗口。
*           所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
*           全局变量是 window 对象的属性。
*           全局函数是 window 对象的方法。
*               甚至 HTML DOM 的 document 也是 window 对象的属性之一：
*               window.document.getElementById("header");
*                   与此相同：
*               document.getElementById("header");
 */